<template>
	<view class="feedback-add-container">
		<view class="data-content">
			<u-cell-group class="data-row" :border="false">
				<u-cell title="反馈内容:" size="large"></u-cell>
				<u-cell :border="false">
					<view slot="value" class="u-slot-text">
						<u--textarea v-model="detailForm.feedbackContent" placeholder="请输入内容" count></u--textarea>
					</view>
				</u-cell>
			</u-cell-group>
			<u-cell-group class="data-row" :border="false">
				<u-cell title="相关图片:" size="large"></u-cell>
				<u-cell :border="false" class="u-image">
					<view slot="title" class="u-slot-img">
						<view class="img-content" v-for="(item, index) in relatedImages" :key="index">
							<view class="u-upload__dele" @click="deletePic(item)">
								<u-icon name="close" size="10" class="icon" color="#fff"></u-icon>
							</view>
							<image :src="item.url" class="image-item" mode="heightFix"></image>
						</view>
						<image src="../../../static/images/upload_img.svg" @click="uploadFn" class="upload-image"></image>
					</view>
				</u-cell>
				<u-cell :border="false">
					<u--textarea v-model="detailForm.title" placeholder="请输入内容" disabled count></u--textarea>
				</u-cell>
			</u-cell-group>
		</view>
		<view class="">
			<u-button class="createSession" type="primary" text="提交" @click="addFeedback()"></u-button>
		</view>
	</view>
</template>

<script>
import config from '@/config'
export default {
	data() {
		return {
			detailForm: {
				feedbackContent: '',
				relatedImages: []
			},
			token: '',
			baseUrl: '',
			relatedImages: []
		};
	},
	onLoad() {
	    this.token = uni.getStorageSync('token')
		this.baseUrl = uni.$config.baseUrl
	},
	methods: {
		deletePic(value) {
		  this.detailForm.relatedImages = this.detailForm.relatedImages.filter(item => item !== value.fileUrl);
		  this.relatedImages = this.relatedImages.filter(item => item.fileUrl !== value.fileUrl);
		},
	  uploadFn(event){
		  console.log(event)
	      let that = this
		  console.log(that.token)
	      let type = ['.png','.jpg','.jpeg','.svg']
	      uni.chooseFile({
	          extension: type,
	          count: 1,
	          type: 'image',
	          success: function (res) {
	              let size = Number(res.tempFiles[0].size / 1024 / 1024)
	              if (size > 10) {
	                  that.$toast('仅支持上传10MB以内的图片')
	                  return true
	              }
	              let num = 0
	              let fileType = []
	              let hasType = []
	              res.tempFiles.forEach(item => {
	                  fileType = item.name.split('.')
	                  hasType = type.filter(item => item === '.' + fileType[fileType.length - 1])
	                  if (hasType && hasType.length === 0) {
	                      num++
	                  }
	              })
	              if (num > 0) {
	                  that.$toast('仅支持' + type.join(',') + '格式文件')
	                  return true
	              }
	              res.tempFilePaths.forEach(item => {
	                  uni.uploadFile({
	                      url: config.baseUrl + '/file/upload',
	                      header: {
	                          token: that.token,
	                      },
	                      filePath: item,
	                      name: 'file',
	                      formData: {
	                      },
	                      success: (data) => {
							  console.log(uni.$config.baseUrl)
							  // that.inputForm.avatar = tempData.data.id
							  // that.inputForm.avatarUrl = uni.$config.baseUrl + tempData.data.downloadUrl
	                          let tempData = JSON.parse(data.data)
							  that.detailForm.relatedImages.push(tempData.data.fileUrl)
							  that.relatedImages.push({
								url: uni.$config.baseUrl + tempData.data.downloadUrl,
								fileUrl: tempData.data.fileUrl
							  })
							  console.log(that.detailForm.relatedImages)
	                      },
	                      fail: uploadFileError => {
	                          // 处理上传失败的错误
	                      }
	                  })
	              })
	          }
	      })
	  },
      uploadFilePromise(url) {
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: config.baseUrl + '/file/upload',
            filePath: url,
            name: "file",
            formData: {
              user: "test",
            },
            success: (res) => {
              setTimeout(() => {
                resolve(res.data.data);
              }, 1000);
            },
          });
        });
      },
	  addFeedback() {
		  if (!this.detailForm.feedbackContent) {
			  this.$toast('反馈内容不能为空')
			  return
		  }
		  this.$request({
		    url: "/feedback/add",
		    method: "post",
		    data: this.detailForm,
		  }).then((data) => {
			this.$toast(data.msg);
			setTimeout(() => {
				uni.navigateBack();
			}, 1000);
		  }).catch(err => {
			  console.log(err)
		  })
	  }
	},
}
</script>

<style lang="scss" scoped>
	.feedback-add-container {
		padding: 40rpx 30rpx 66rpx;
		.data-content {
			.data-row {
				font-size: 30rpx;
				display: flex;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 40rpx;
				color: #4C5A67;
				::v-deep .u-cell__title-text {
					color: #1C2126;
				}
				.u-slot-text {
					width: 100%;
					.u-textarea {
						border: none;
						background: #F5F7FB;
						height: 234rpx;
						border-radius: 8px;
						::v-deep .u-textarea__field {
							color: #1C2126;
							font-size: 30rpx;
						}
					}
				}
				.u-image {
					::v-deep .u-cell__body {
						overflow-x: auto;
					}
				}
				.u-slot-img {
					width: 100%;
					height: 128rpx;
					display: flex;
					.img-content {
						position: relative;
						.u-upload__dele {
							position: absolute;
							top: 0;
							right: 15rpx;
							background-color: #373737;
							height: 14px;
							width: 14px;
							display: flex;
							flex-direction: row;
							border-bottom-left-radius: 100px;
							align-items: center;
							justify-content: center;
							z-index: 3;
						}
						.icon {
							position: absolute;
							right: 0;
							top: 0;
							z-index: 99;
						}
					}
					.image-item {
						height: 128rpx;
						margin-right: 20rpx;
					}
					.upload-image {
						width: 128rpx;
						height: 128rpx;
					}
				}
			}
		}
		.createSession {
			position: absolute;
			bottom: 60rpx;
		    left: 0;
		    right: 0;
			width: calc(100% - 60rpx);
			height: 80rpx;
			background: #0084FF;
			opacity: 1;
		}
		::v-deep .u-textarea__count {
			height: 44rpx;
			position: absolute;
			right: 5px;
			top: -42px;
			font-size: 15px;
			color: #4C5A67;
		}
	}
</style>